<template>
  <!-- 图片上传 -->
  <div class="uploadNotice" v-html="notice"></div>
  <div class="uploadImage">
    <div v-if="!fileList?.length" class="shwoImage">
      <img src="@/assets/image/png.png" alt="" />
    </div>
    <upload-base
      ref="imageRef"
      v-model="fileList"
      list-type="picture-card"
      :isRaw="false"
      :disabled="disabled"
      :show-file-list="true"
      :multiple="limit !== 1"
      v-bind="attrs"
    >
      <span :class="['uploadImageBtn', 'uploadImageBtn' + disabled]">Upload</span>
      <template #file="{ file }">
        <div>
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
          <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
              <el-icon><zoom-in /></el-icon>
            </span>
            <span v-if="deleteShow" class="el-upload-list__item-delete" @click="handleRemove(file)">
              <el-icon><Delete /></el-icon>
            </span>
          </span>
        </div>
      </template>
    </upload-base>
  </div>
  <el-dialog v-model="dialogVisible" title="Preview Picture">
    <img w-full style="max-width: 100%" :src="dialogImageUrl" alt="Image loading failure" />
  </el-dialog>
</template>
<script setup>
import UploadBase from './UploadBase.vue';
import { vModelValue } from '@/utils/hooks.js';

const props = defineProps({
  notice: {
    type: String,
    default: 'Support uploading png format, the file size does not exceed 5m',
  },
  modelValue: {
    type: Array,
    default: [],
  },
  limit: {
    type: Number,
    default: 0,
  },
  disabled: {
    // 是否禁用
    type: Boolean,
    default: false,
  },

  deleteShow: {
    // 是否展示删除按钮
    type: Boolean,
    default: true,
  },
});

const emits = defineEmits(['update:modelValue']);
const { newValue: key } = vModelValue(props, emits);
let fileList = ref(key);

const attrs = useAttrs();

const imageRef = ref();
let dialogImageUrl = ref('');
let dialogVisible = ref(false);

// 预览
function handlePictureCardPreview(file) {
  dialogImageUrl.value = file.url;
  dialogVisible.value = true;
}

// 删除
function handleRemove(file) {
  fileList.value.forEach((item, index) => {
    if (item.uid === file.uid) {
      fileList.value.splice(index, 1);
    }
  });
  imageRef.value.init(fileList.value);
}
</script>
<style lang="scss" scoped>
.uploadNotice {
  font-size: 14px;
  font-weight: 500;
  color: #909399;
  line-height: 18px;
}
.uploadImage {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  .shwoImage {
    width: 120px;
    height: 120px;
    border: 1px solid #f6f6f6;
    display: flex;
    align-items: center;
    padding-left: 10px;
    box-sizing: border-box;
    img {
      width: 100px;
      height: auto;
    }
  }
  :deep() {
    .el-upload--picture-card {
      background: #fff;
      border: none;
      width: auto;
      height: 120px;
    }
    .el-upload-list--picture-card .el-upload-list__item {
      width: 120px;
      height: 120px;
      margin: 0;
      box-sizing: border-box;
      border: 1px solid #f6f6f6;
      border-radius: 0;
      > div {
        width: 100%;
      }
    }
  }
}

.uploadImageBtn {
  margin-left: 20px;
  width: 85px;
  height: 40px;
  line-height: 40px;
  border-radius: 2px;
  border: 1px solid #cccccc;
  font-size: 14px;
  color: #303133;
  text-align: center;
}
.uploadImageBtnTrue {
  cursor: not-allowed;
}
</style>
